import React, { PureComponent } from 'react'
import './03_history模式-navlink.css'
import { Link, Routes, Route, BrowserRouter, NavLink  } from 'react-router-dom'
import Home from './home'
import About from './about'



export default class HistoryRouterNavLink extends PureComponent {
  constructor(props){
    super(props);
    this.state = {
      routes: [
        {path: '/', title: '首页', component: Home},
        {path: '/about', title: '关于', component: About}
      ],
      currentIndex: 0
    }
  }
  render() {
    return (
      <div>
        <BrowserRouter>
          {/* 实现选中态 */}
          {/* {
            this.state.routes.map((item,index) => {
              return (
                <Link className={this.state.currentIndex === index ? 'link_item link_item_active' : 'link_item'} 
                  key={item.path} to={item.path} onClick={e => this.setState({currentIndex: index})}>{item.title}</Link>
              )
            })
          }
          <Routes>
            {
              this.state.routes.map(item => {
                return (
                  <Route key={item.path} path={item.path} element={<item.component />}></Route>
                )
              })
            }
          </Routes> */}

          {/* 使用navlink  knows whether or not it is "active", "pending", or "transitioning". 
          实现上述功能 */}
          <NavLink to="/" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>首页</NavLink>
          <NavLink to="/about" className={({isActive}) => isActive ? 'link_item_active link_item' : 'link_item'}>关于</NavLink>
          
          <Routes>
            <Route path='/' element={<Home />}></Route>
            <Route path='/about' element={<About />}></Route>
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}
